<template>
    <div>

        <crumbs></crumbs>
        <div class="total">
            <div class="name"> 组织机构订制</div>
            <div class="mybtn">
                <el-button type="primary" class="btn" @click="daorumuban">导入模板下载</el-button>
                            <el-upload
              action="http://1.14.73.59:8080/organization/import1"
              >
              <el-button type="primary" class="btn">导入模板</el-button>
            </el-upload>
                <el-button type="primary" class="btn" @click="exports">导出</el-button>
            </div>
        </div>
        <div class="body">
            <div class="myStructure">
                <myStructure></myStructure>
            </div>
            <div class="list">
                <div>
                    <el-table :data="tableData" border style="width: 100%">
                        <el-table-column prop="o_id" label="工作队名称" align="center" />
                        <el-table-column prop="o_name" label="队长姓名" align="center" />

                    </el-table>
                </div>
            </div>
        </div>

    </div>
</template>

<script >
import axios from 'axios'
import * as XLSX from 'xlsx'
import crumbs from "../../components/ServiceManagement/crumbs/crumbs.vue"
import myStructure from "../../components/ServiceManagement/table/myStructure.vue"
import { ref, onMounted, reactive } from "vue"
// 导入ref  用于做响应式处理
export default {
    setup() {
        //2.定义
        const daochu = ref('导出')
        const o_id = ref("")
        const o_name = ref("")
        const team_name = ref("")
        let tableData = ref([])
        axios({
            url: "http://172.16.123.99:8080/organization/findorganizationList2",
            method: "post",
        }).then(
            resp => {
                console.log(resp.data.data);

                tableData.value = JSON.parse(resp.data.data)
            }
        )

        const exports = () => {
            const data = XLSX.utils.json_to_sheet(tableData.value)//此处tableData.value为表格的数据
            const wb = XLSX.utils.book_new()
            XLSX.utils.book_append_sheet(wb, data, 'test-data')//test-data为自定义的sheet表名
            XLSX.writeFile(wb, 'test.xlsx')//test.xlsx为自定义的文件名
            console.log(111)
            axios({
                method: "post",
                url: "http://172.16.123.99:8080/organization/import2",
                params: {
                    o_id: o_id.value,
                    o_name: o_name.value,
                    team_name: team_name.value
                }
            }).then((resp) => {
                console.log(resp)
            })
        }

        const daorumuban = () => {
            axios({
                method: "get",
                url: "http://172.16.123.99:8080/organization/importTemplate",
            }).then((resp) => {
                console.log(99999999999,resp.data)
            })
        }


        //3.导出   如果想要数据在外部渲染 必须得导出
        return {
            exports,
            tableData,
            XLSX,
            o_name,
            team_name,
            o_id,
            daorumuban
            // daoru,
        };

    },
    components: {
        crumbs,
        myStructure
    },

}
</script>
<style scoped>
.name {
    text-align: left;
}

.total {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

.mybtn {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.body {

    display: flex;
    justify-content: space-between
}

.myStructure {
    width: 15%;
}

.list {
    width: 80%;
}
</style>